/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Cell, Embed, RCell, Table, TableBody, TableRow, Text, useTheme,} from "customize-easy-ui-component";
import {DirectLink, } from "../../../routing/Link";
import {useFolder, } from "../../hook/useMainRepUrlOr";
import {俩列检验设备概况} from "../../park/views";
import {config证书概要} from "./editorCert";
import {FadeImage} from "../../../comp/FadeImage";
import {CertFirstPageHead} from "../../contain/rarelyVary";
import Img_TS from "../../../images/TS.png";

//证书
export const CertificatePage= ({ orc, rep, children} : { orc: any,rep: any,children?: React.ReactNode}
) => {
  const theme= useTheme();
  const servRows=俩列检验设备概况({orc,rep, config:config证书概要});
  const mainRows=servRows?.slice(0,6);       //舍弃最后一行。但保留编辑输入的用处。
  const callback = () => {
    return <div  css={{"@media print": {height:'100vh', overflowY: 'hidden',} }}>
        { CertFirstPageHead({theme,rep, mbbm:'FJB/RD-10282-0-2016'}) }
        <div css={{
          "@media print": {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-around',
            height: 'calc(100vh - 4rem)',     //剪掉上面头部的高度
          }
        }}>
          <Text variant="h3" css={{textAlign:'center', "@media print": {fontSize: theme.fontSizes[5],},}}>
            锅炉制造监督检验证书
          </Text>
          <div>
            <div css={{display: 'flex',justifyContent: 'space-between',}}>
              &nbsp;
              <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
              }}>编号：{rep.isp?.no}</Text>
            </div>
            <Table fixed={ ["13.9%", "47%", "13.9%", "%"] }  css={ {borderCollapse: 'collapse',
                             "@media print": {height:'72vh',} } } tight  miniw={800}>
              <TableBody>
                <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/CertificateSummary`}>
                  {mainRows}
                  <TableRow>
                    <Cell colSpan={4}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
                      <Text css={{fontSize:'0.8rem'}}>监督检验范围说明：<br/>
                      </Text>
                      {orc.范围备注 || '／'}
                    </div></Cell>
                  </TableRow>
                </DirectLink>
                <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion`}>
                <TableRow>
                  <CCell colSpan={4}>
                      <Table  fixed={ ["24%", "39%", "6%", "%"] }
                             css={ {borderCollapse: 'collapse', "@media print": {height:'fill-available'},} }  tight  miniw={800}>
                        <TableBody>
                          <TableRow>
                            <Cell css={{border:'none',textIndent:'2rem'}} colSpan={4}>按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该产品的制造经我机构
                             监督检验，{orc.检验结论}《锅炉安全技术规程》规定的基本安全要求
                              {orc.检验结论==='符合' && '，特发此证书，并且在该台锅炉产品铭牌上打有如下监督检验钢印'}
                              ：</Cell>
                          </TableRow>
                          <TableRow>
                            <Cell css={{border:'none'}} colSpan={4}>
                              <Embed css={{width: "96px",margin: "auto",top: '-0.15rem'}} width={43} height={43}>
                                <FadeImage src={Img_TS}/>
                              </Embed>
                            </Cell>
                          </TableRow>
                          <TableRow css={{"@media print": {height:'3rem'} }}>
                            <RCell css={{border:'none'}}>监督检验人员：</RCell>
                            <Cell css={{border:'none'}}>机erter</Cell>
                            <RCell css={{border:'none'}}>日期：</RCell>
                            <Cell css={{border:'none'}}>{orc.检验日期}</Cell>
                          </TableRow>
                          <TableRow css={{"@media print": {height:'3rem'} }}>
                            <RCell css={{border:'none'}}>审   核：</RCell>
                            <Cell css={{border:'none'}}></Cell>
                            <RCell css={{border:'none'}}>日期：</RCell>
                            <Cell css={{border:'none'}}>2024-04-10</Cell>
                          </TableRow>
                          <TableRow css={{"@media print": {height:'3rem'} }}>
                            <RCell css={{border:'none'}}>批   准：</RCell>
                            <Cell css={{border:'none'}}></Cell>
                            <RCell css={{border:'none'}}>日期：</RCell>
                            <Cell css={{border:'none'}}>2024-04-10</Cell>
                          </TableRow>
                          <TableRow>
                            <RCell css={{border:'none'}}>监督检验机构：</RCell>
                            <Cell colSpan={2} css={{border:'none'}}>{rep?.isp?.ispu?.name}</Cell>
                            <CCell css={{border:'none'}}>（监督检验机构检验专用章）</CCell>
                          </TableRow>
                          <TableRow css={{"@media print": {height:'fill-available'} }}>
                            <RCell  css={{border:'none'}}>监督检验机构核准证号：</RCell>
                            <Cell  colSpan={2} css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</Cell>
                            <CCell css={{border:'none'}}>2024-04-10</CCell>
                          </TableRow>
                        </TableBody>
                      </Table>
                  </CCell>
                </TableRow>
                </DirectLink>
              </TableBody>
            </Table>
          </div>
          <Text css={{fontSize:'0.8rem'}}>注：本证书一式三份，一份监检机构存档，两份送制造单位，其中一份由制造单位随产品出厂资料交付使用(建设)单位。
          </Text>
        </div>
      </div>
  }
  //Hash路由的id对应的DIV 不可以放在Collapse组件底下的。 还未加载组件的无法定位。
  const [renderAll]=useFolder(callback,'检验证书折叠',false);
  return <>
    <div id="Certificate"/>
    { callback() }
  </>;
};
